<template>
    <el-icon v-if="imageUrl == ''" style="width: 200px;height: 150px;background-color: #f5f7fa;"><icon-picture /></el-icon>
    <div v-else class="image-container">
        <img :src="imageUrl" style="width: 100%;height: 100%;" />
        <div class="overlay">
            <el-icon style="
                      position: absolute;
                      z-index: 1;
                      left: 50%;
                      top: 50%;
                      transform: translate(-50%, -50%);
                    " :size="30" @click="preview">
                <Search />
            </el-icon>
        </div>
    </div>
    <el-dialog v-model="dialogVisible">
        <img :src="imageUrl" alt="Preview Image" w-full style="width: 100%" />
    </el-dialog>
</template>
<script setup>
import {ref} from 'vue'
import { Search} from "@element-plus/icons-vue";
import { Picture as IconPicture } from '@element-plus/icons-vue'
const props = defineProps({
    imageUrl: {
        type: String,
        defalut: ''
    }
})
const dialogVisible = ref(false)
const preview = ()=>{
    dialogVisible.value = true
}
</script>
<style lang="less" scoped>
.image-container {
    position: relative;
    display: inline-block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    cursor: pointer;
}

.overlay:hover {
    opacity: 1;
}
</style>
